<template>
  <div class="category">
    <!-- 分类商品 -->
    <div class="category-goods">
      <div class="category-goods-item" v-for="(item,index) in categoryData" :key="index">
        <div class="category-goods-hover" @click="toDetail(item)">
          <div class="img">
            <img :src="item.goodsImg" alt="">
          </div>
          <p class="name">{{item.goodsname}}</p>
          <p class="describe" :title="item.describe">{{item.describe}}</p>
          <p class="price">{{item.price}}元</p>
          <p class="address">{{item.goodsAddress}}</p>
          <el-button type="primary" @click.stop="addCart(item)">加入购物车</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 发请求全部导入
import api from '@/api/commonIndex/index'
export default {
  data() {
    return {
      // 传下来的分类
      category:this.$route.query.value,
      category1:this.$route.query.searchValue,
      category2:this.$route.query.searchOption,
      // category:this.$route.params.value,
      // 分类数据
      categoryData:[],
    }
  },
  watch:{
    
  },
  methods: {
    getCategoryByValue(){
      if(this.category2 && this.category1){
        // console.log(this.category2)
        // console.log(this.category1)
        // 搜索名字
        if(this.category2 === '1'){
          api.getCategoryByName({_id:this.category1}).then(res=>{
            console.log(res)
            if(res.code !== 200)return
            this.categoryData = res.data
            if(this.categoryData.length === 0){
              this.$message.warning('没有您搜索的商品哦，给您返回首页！')
              this.$router.push({path:'/common/index'})
            }
          })
        // 搜索地名
        }else{
          api.getCategoryByAddress({_id:this.category1}).then(res=>{
            console.log(res)
            if(res.code !== 200)return
            this.categoryData = res.data
            if(this.categoryData.length === 0){
              this.$message.warning('没有您搜索的商品哦，给您返回首页！')
              this.$router.push({path:'/common/index'})
            }
          })
        }
      }
      // 分类
      if(this.category){
        api.getCategoryByValue({_id:this.category}).then(res=>{
          console.log(res)
          if(res.code !== 200)return
          this.categoryData = res.data
        })
      }
    },
    // 加入购物车
    addCart(item){
      // 这里的加入购物车只能加入一个
      // 默认加入数量
      let temp = JSON.parse(JSON.stringify(item))
      temp.num = 1
      // temp.check = false
      this.$store.dispatch('setCartGoods',temp)
    },
    // 去详情页
    toDetail(item){
      // console.log(item._id)
      this.$router.push({path:'/common/detail',query:{id:item._id}})
    },
  },
  created() {
    this.getCategoryByValue()
  },
  mounted() {
  //  console.log(this.category)
  },
}
</script>
<style lang="less" scoped>
.category{
  overflow: hidden;
  padding-top: 10px;
  .category-goods{
    margin-right: auto;
    margin-left: auto;
    width: 1200px;
    .category-goods-item{
      float: left;
      width: 291px;
      height: 360px;
      margin-right: 12px;
      margin-bottom: 10px;
      // background-color: #fff;
      &:nth-child(4n){
        margin-right: 0px;
      }
      .category-goods-hover{
        position: relative;
        height: 100%;
        width: 100%;
        text-align: center;
        transition: all ease .3s;
        background-color: #fff;
        .img{
          width: 240px;
          height: 240px;
          margin-left: 50%;
          padding-top: 20px;
          transform: translateX(-50%);
          img{
            width: 100%;
            height: 100%;
          }
        }
        p{
          color: #918f8f;
          margin-top: 5px;
        }
        .price{
          color: #ff442f;
        }
        .describe{
          padding: 0 20px;
          overflow: hidden;
          white-space:nowrap;
          text-overflow: ellipsis;
          opacity: 1;
          transition: all ease .1s;
        }
        .name{
          opacity: 1;
          transition: all ease .1s;
        }
        /deep/ .el-button{
          position: absolute;
          top: 268px;
          left: 88px;
          opacity: 0;
          transition: all ease .3s;
        }
        &:hover{
          transform: translate3d(0,-2px,0);
          box-shadow: 0 15px 30px rgba(0,0,0,.1);
          .el-button{
            opacity: 1;
          }
          .name,.describe{
            opacity: 0;
          }
        }
      }
    }
  }
}
</style>